<template>
  <div class="theme">
    <el-scrollbar @scroll="onScroll" height="calc(100vh - 160px)" class="left-content">
      <div class="left">
        <el-form ref="ruleFormRef" :model="form" :rules="rules" class="demo-ruleForm" label-position="top">
          <Card :className="className" :cardList="cardList" :form="form" />
        </el-form>
      </div>
    </el-scrollbar>

    <div class="right">
      <Nav :headers="navArr" @onScrollNav="onScrollNav" :toId="toId"></Nav>
    </div>
    <div class="footer">
      <div class="footer-button">
        <el-button type="primary" @click="settingSave">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import Card from '@/common/components/card/index.vue'
import Nav from '@/common/components/right-nav/index.vue'
import { fetchData, updateData } from '@app/call-center/apis/client-setting'
import { userModule } from '@/common/store/modules/user'
export default defineComponent({
  name: 'AdminMain',
  components: {
    Card,
    Nav
  },
  // ----------------生命周期-----------------------
  setup() {
    const USERMODULE = userModule()
    const state = reactive({
      className: 'client-card',
      toId: 'a',
      // navArr: ['登录初始状态', '自动切换状态', '禁止呼入挂机', '禁止外呼挂机'],
      navArr: [
        { name: '登录初始状态', id: 'a' },
        { name: '自动切换状态', id: 'b' },
        { name: '禁止呼入挂机', id: 'c' },
        { name: '禁止外呼挂机', id: 'd' }
      ],
      cardList: [
        {
          id: 'a',
          type: 'radio',
          title: '登录初始状态',
          content:
            '员工登录客服工作台时，默认的电话条状态。默认为“忙碌”状态，员工准备就绪后可手动切换为【空闲】状态开始话务工作',
          Option: {
            radioName: 'defaultLoginStatus',
            options: [
              {
                label: '忙碌',
                value: '1'
              },
              {
                label: '空闲',
                value: '0'
              }
            ]
          }
        },
        // {
        //   type: 'input', name: 'value1', title: '自动接听', content: "开启后，可设置员工振铃0-7秒内系统将自动接听，无需员工点击电话条上的【接听】按钮。<br/><span style='color:red'>请注意，如果员工暂时离开不在工位没有及时切换电话条状态，会导致无人接听，请非呼叫中心专业职场的企业谨慎开启。<span/>", Option: {
        //     label: '振铃时间',
        //     inputName: 'input1',
        //     unit: '秒'
        //   }
        // },
        {
          id: 'b',
          type: 'input',
          name: 'autoChangeToBusy',
          title: '自动切换状态',
          content:
            '开启后，当员工有连续几次未成功接听的情况时，系统会自动将此员工的电话条状态变更为【忙碌】。可设置0-99次，建议设置为3次。',
          Option: {
            label: '未接次数',
            labelTip: '未接必须满足连续的条件系统才会进行状态表更',
            inputName: 'autoChangeToBusyCount',
            unit: '次'
          }
        },
        {
          id: 'c',
          type: 'switch',
          name: 'forbidDialInHangup',
          title: '禁止呼入挂机',
          content:
            '开启后，当员工呼入客户号码时，不允许员工操作电话条“挂机”按钮，仅能通过操作“满意度调查”按钮或者等待客户挂机来结束通话。注意手机和 SIP话机方式接听，在设备上挂机不受限制。'
        },
        {
          id: 'd',
          type: 'switch',
          name: 'forbidDialOutHangup',
          title: '禁止外呼挂机',
          content:
            '开启后，当员工呼入客户号码时，不允许员工操作电话条“挂机”按钮，仅能通过操作“满意度调查”按钮或者等待客户挂机来结束通话。注意手机和 SIP话机方式接听，在设备上挂机不受限制。'
        }
      ],
      form: {
        autoChangeToBusy: false,
        forbidDialInHangup: false,
        forbidDialOutHangup: false,
        autoChangeToBusyCount: 3,
        defaultLoginStatus: '1'
      },
      // 表单校验
      rules: {
        autoChangeToBusyCount: [{ required: true, message: '请输入0-99内的整数', type: 'number', min: 0, max: 99 }]
      }
    })

    // 滚动事件，对应右侧更改
    const onScroll = (obj: any) => {
      // const arrayOfDocFonts = document.getElementsByClassName('info-alert')
      for (var i = 0; i < state.navArr.length; i++) {
        if (state.navArr[i].id != '') {
          const offsetHight = (document as any).getElementById(`${state.navArr[i].id}`).offsetTop
          if (obj.scrollTop >= offsetHight) {
            state.toId = state.navArr[i].id
          }
        }
      }
    }
    function onScrollNav(link: string) {
      if ((document as any).getElementById(link)) {
        ;(document as any).getElementById(link).scrollIntoView({ behavior: 'smooth' })
      }
    }
    function callList() {
      fetchData({ accountId: USERMODULE.accountId || '' }).then((res) => {
        if (res.success) {
          state.form = res.data || {}
        }
      })
    }
    const instance: any = getCurrentInstance()
    function settingSave() {
      instance?.refs.ruleFormRef.validate((valid: boolean) => {
        if (valid) {
          updateData({ accountId: USERMODULE.accountId || '', ...state.form }).then((res) => {
            if (res.success) {
              ElMessage({ message: '保存成功', type: 'success' })
            }
          })
        }
      })
    }
    onMounted(() => {
      callList()
    })

    return { onScrollNav, onScroll, settingSave, ...toRefs(state) }
  }
})
</script>

<style lang="stylus" scoped>
:deep(.el-form-item)
  margin-bottom: 0;
.left-content {
  width: 100%;
}

.theme {
  display: flex;
  width: 100%;
  padding-top: 24px

  .left {
    width: 80%;
  }

  .right {
    width: 15%;
    position: absolute;
    right 0
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 240px;
    height: 60px;
    width: calc(100% - 240px);
    box-shadow: 0 0 4px 0 #e0e6f0;
    background: #fff;
    display: flex;
    justify-content: end;
    align-items: center;

    .footer-button {
      padding: 0 24px;
    }
  }
}
</style>
